<template>
  <div class="tabs">
    <div class="tabs_wrapper">
      <div
        :class="{ colorActive: isCur == index }"
        class="tab"
        v-for="(item, index) in tabName"
        :key="index"
        @click="(isCur = index), onTabClick('select' + (index + 1))"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="introduction">
      <Icon type="ios-help-circle-outline" />
      <span class="text">使用说明</span>
    </div>
    <keep-alive>
      <component :is="tabView"></component>
    </keep-alive>
  </div>
</template>

<script>
import select1 from "./Select01";
import select2 from "./Select02";
import select3 from "./Select03";

export default {
  components: {
    select1,
    select2,
    select3
  },
  data() {
    return {
      tabView: "select1",
      isCur: 0,
      tabName: [{ name: "未使用" }, { name: "已使用" }, { name: "已过期" }]
    };
  },
  methods: {
    onTabClick(tabView) {
      this.tabView = tabView;
    }
  }
};
</script>

<style lang="stylus" scoped>
.tabs {
  .introduction {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right 15px
    font-size 14px
    color #cccccc

    .text {
        margin-left 5px
    }
  }

  .tabs_wrapper {
    display: flex;
    justify-content: center;

    .tab {
      display: flex;
      justify-content: center;
      flex: 1;
      padding: 15px 0;
      font-size: 16px;
      color: #aaaaaa;

      &.colorActive {
        color: #333333;
        font-size: 18px;
      }
    }
  }
}
</style>
